<template>
  <div class="home">
    <!-- left -->
    <div class="menu">
      <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
        text-color="#fff" @open="handleOpen" @close="handleClose">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon>
            <document />
          </el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <setting />
          </el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- right -->
    <div class="content">
      <div class="header">header</div>
      <div class="content-wrap">content-wrap</div>
    </div>
  </div>
</template>

<script>

export default {
  setup() {


    return {}
  }
}
</script>

<style  scoped>
.home{
  width: 100vw;
  height: 100vh;
  display: flex;

}
.menu{
  width: 200px;
  height: 100%;
  background-color: #545c64;
}

.content{
  flex:1;
  display: flex;
  flex-direction: column;
}
.header{
  height: 60PX;
  background-color: blueviolet;
}
.content-wrap{
  flex: 1;
}
</style>